 @charset "utf-8";
@import "reset";
@mixin bgg($width,$height){
    width: $width/2;
    height: $height/2;
}
@mixin img(){
    width:100%;
    height: 100%;
}
@function px($px){
    @return ($px/2);
}
$fontsize:20;
@function r($px){
    @return $px/(2*$fontsize) * 1rem;
}
html,body{
            width: 100%;
            height: 100%;
        }
        #web{
            width: 100%;
            height: 100%;
            position: relative;
        }
        header{
            width: 94%;
            height: r(57);
            background: white;
            position: absolute;
            margin-top: r(48);
            top: 0;
            left: 0;
            div{
                vertical-align: middle;
            }
            .logo{
                float: left;
                width: 16.4%;
                 height: r(57);
                 margin-left:r(23);
                 border: 1px solid #ff9344;
                 border-radius: 12px;
                 text-align: center;
                a{
                    display: block;
                    @include img();
                    border-radius: 8px;
                    font-size: r(26);
                    line-height: r(57);
                    color: #000;
                    border: none;
                    background: transparent;
                }
            }
           p{
               text-align: center;
               font-size: r(26);
               color: #000;
               line-height: r(57);
           }
         .selectBar{
            width: 21%;
            height: r(54);
            line-height: r(50);
            border: 1px solid #ff9344;
            float: right;
            background: url(../img/down.png) no-repeat right r(12) center;
            background-size:r(30) r(16);
             select{
                width: 100%;
                height: 100%;
                background: transparent;
                border: none;
                font-size: r(26);
                text-indent: r(20);
                vertical-align: top;
                color: #000;
                 appearance: none;
                -webkit-appearance:none;
                -moz-appearance:none;
                outline: none;
            }
       }
        }    
        section{
            width: 94%;
            position:absolute;
            left: r(24);
            top: r(124);
            bottom: r(136);
            overflow-y: scroll;
                .searchBar{
                width: 38%;
                height: r(50);
                line-height:  r(50);
                border: 1px solid #ff9344;
                border-radius: 25px;
                padding: 0 r(18);
                box-sizing: border-box;
                margin: r(34) auto 0 ;
                position: relative;
                input{
                    width: 90%;
                    height: 100%;
                    border: none;
                    vertical-align: top;
                    font-size: r(24);
                    color: #777777;
                    border-radius: 4px;
                }
                i{
                    font-size: r(28);
                    color:#ff9344;
                    position: absolute;
                    right: r(12);
                }
               }
               .allseo{
                   p{
                       font-size: r(26);
                       color: #000;
                       text-align: center;
                       margin-top: r(24);
                       margin-bottom: r(16);
                   }
                   .seo{
                       width:r(512);
                       margin: 0 auto;
                       text-align: center;
                       li{
                           float: left;
                           width: r(125);
                           height: r(64);
                           background: #dcdcdc;
                           margin-right: r(4);
                           margin-bottom: r(4);
                           &:nth-child(4n){
                               margin-right: 0;
                           }
                           a{
                               font-size: r(20);
                               color: #898989;
                               line-height:r(64) ;
                           }
                       }
                   }
               }
            article{
                .title{
                    width: 100%;
                    margin-top: r(34);
                    p:nth-of-type(1){
                        img{
                            //@include bgg(32px,48px);
                            width: r(32);
                            height: r(48);
                        }
                        span{
                            font-size: r(30);
                            color: #000;
                            line-height: r(54);
                            vertical-align:top;
                        }
                    }
                     p:nth-of-type(2){
                        // margin-right: px(21px);
                        a{
                            color: #000;
                            font-size: r(24);
                            line-height: r(54);
                            i{
                                color: #ff9344;
                                position: relative;
                                top: r(2);
                            }
                        }
                    }
                }
                .shopList{
                    margin-top: r(32);
                    .foodL{
                        width: r(279);
                        height: r(352);
                        overflow: hidden;
                        img{
                            width: 100%;
                        }
                    }
                    .foodR{
                        width: r(420);
                        div{
                            width: 100%;
                            height: r(147);
                            overflow: hidden;
                            img{
                                width: 100%;
                            }
                        }
                        ul{
                            width: 100%;
                            margin-top: r(8);
                            li:first-of-type{
                                width: r(195);
                                height: r(197);
                                overflow: hidden;
                                margin-right: r(11);
                                img{
                                    width: 100%;
                                }
                            }
                             li:last-of-type{
                                width: r(211);
                                height: r(197);
                                overflow: hidden;
                                img{
                                    width: 100%;
                                }
                            }
                        }
                    }
                    .recom{
                        li{
                            float: left;
                            &:nth-of-type(1){
                                width: r(228);
                                height: r(200);
                                overflow: hidden;
                                margin-right: r(17);
                                img{
                                    width: 100%;
                                }
                            }
                            &:nth-of-type(2){
                                width: r(211);
                                height: r(200);
                                overflow: hidden;
                                margin-right: r(19);
                                img{
                                    width: 100%;
                                }
                            }
                            &:nth-of-type(3){
                                width: r(220);
                                height: r(200);
                                overflow: hidden;
                                img{
                                    width: 100%;
                                }
                            }
                        }
                    }
                }
            }
        }
        footer{
            width: 100%;
            height:r(136);
            background: white;
            position: absolute;
            bottom: 0;
            left: 0;
            ul li{
                width: 25%;
                height: 100%;
                float: left;
                text-align: center;
                .iconfont{
                    color: transparent;
                    font-size: r(60);
                    -webkit-text-stroke: r(2) #ff9344;
                }
                &.active .iconfont{
                    color: #ff9344;
                }
                &:hover .iconfont{
                    color: #ff9344;
                }
            }
            a{
                color: #000;
                
            }
        }
